import React, {Component} from 'react'
import {Text, View, StyleSheet, Button, Image, FlatList, ScrollView, Platform, TouchableOpacity} from 'react-native'
import styles, {HUNDRED_PERCENT, padding, screenHeight} from "../../style/index";
import {AppIcon} from "../../assets/icon/AppIcon";
import CategoryBar from "../../component/widget/CategoryBar";
import ScrollableTabView from 'react-native-scrollable-tab-view';
import TabView from "../../component/widget/TabView";
import ProductDetailSection from "../../component/page/primary/productDetail/index";
import ShopToolBar, {BuyFlag} from "../../component/widget/ShopToolBar";
import DetailModal from "../../component/page/primary/productDetail/detailModal";
import {inject, observer, Provider} from "mobx-react/custom";
import {Store} from "../../store";
import {getProductStoreInstance, ProductStore} from "../../store/modules/main/product";
import {defaultObj, getAssetUrl, isEmpty} from "../../util";
import FastImageCustom from "../../component/widget/FastImageCustom";
import CertStoreInstance from "../../store/modules/cert";

export enum ProductDetailTabCategory {
    detail,
    evaluation
}

export interface ProductDetailActionProps {
    id: number
}

interface RouterProps {
    params: ProductDetailActionProps
}

interface ProductDetailProps extends Store {
}

interface ProductInnerState {
    productId?: number,
}


interface ProductDetailHeaderProps {
    product:ProductStore
}

function ProductDetailHeader(props: ProductDetailHeaderProps) {
    const {name, imageUrl, price, productExtraInfo, infoImageUrl} = props.product.productDetail;
    const {saledCount = 0, favoriteCount = 0} = productExtraInfo || defaultObj;
    if(isEmpty(infoImageUrl)){
        return <View style={{width: HUNDRED_PERCENT, height: 370,backgroundColor:"#d8d8d8"}}/>
    }
    return (<View>
        <FastImageCustom source={{uri: getAssetUrl(infoImageUrl)}} style={{width: HUNDRED_PERCENT, height: 300}}
                         resizeMode={"contain"}/>
        <View style={[{backgroundColor: "#fff", marginTop: 1}, padding(13, 20)]}>
            <View style={[styles.flexDirectionRowNotFlex, {alignItems: "flex-start"}]}>
                <Text numberOfLines={2} style={{flex: 1, fontSize: 16, marginRight: 29, color: "#333333"}}>
                    {name}
                </Text>
                <View style={[{width: 40}, styles.flexDirectionRowNotFlex, styles.centered]}>
                    <AppIcon name={"shoucang"} size={14} color={"#ccc"}/>
                    <Text style={{fontSize: 14, color: "#999999", marginLeft: 5}}>{favoriteCount}</Text>
                </View>
            </View>
            <View style={[styles.flexDirectionRowNotFlex, {marginTop: 6}, styles.justifyBetween, styles.centerH]}>
                <Text style={{color: "#F85824", fontSize: 16}}>￥{price}</Text>
                <Text style={{color: "#999999", fontSize: 12}}>已售 {saledCount}</Text>
            </View>
        </View>
    </View>)
}

function ProductDetailContent() {
    const tabs = [{
        name: "详情", category: ProductDetailTabCategory.detail
    }, {
        name: "评价", category: ProductDetailTabCategory.evaluation
    }];
    return (<View style={{marginTop: 9, backgroundColor: "#fff"}}>
        <TabView tabLabelArr={tabs}>
            <ProductDetailSection tab={tabs[0]} />
            <ProductDetailSection tab={tabs[1]} />
        </TabView>
    </View>)
}

@observer
export default class ProductDetailInner extends Component<ProductDetailProps, ProductInnerState> {
    detailModal: any;
    product: ProductStore = getProductStoreInstance();

    constructor(props) {
        super(props);
        this.state = defaultObj;
    }


    onEnter(props: RouterProps) {

        this.setState({
            productId: props.params.id
        });
        this.refresh(props.params);

    }

    async refresh(params: ProductDetailActionProps) {
        if (params.id) {
            global.showLoading("加载中...");
            const modal = this.detailModal.wrappedInstance;
            await Promise.all([
                this.product.getProductById(params.id),
                this.product.getProductCommentById(params.id),
                this.product.getUserProductRelation(params.id),
                modal.refresh(params.id)
            ]);
            await this.product.computedInfoImageSize();
            this.setState({
                productId: params.id
            });
            global.hideLoading();
        }
    }


    openModal = (flag: BuyFlag) => {
        return () => {
            const modal = this.detailModal.wrappedInstance;
            modal.showModal(flag);
        }
    };




    render() {
        return (
            <Provider product={this.product} cert={CertStoreInstance}>
                <View style={{flex: 1}}>
                    <View style={{flex: 1}}>
                        <ScrollView bounces={false} showsVerticalScrollIndicator={false}
                                    style={[ProductDetailStyles.container]}>
                            <ProductDetailHeader product={this.product}/>
                            <ProductDetailContent />
                        </ScrollView>
                        <DetailModal ref={detailModal => this.detailModal = detailModal}/>
                        <ShopToolBar productId={this.state.productId} buyHandle={this.openModal}
                                     style={{height: 50, backgroundColor: "#fff"}}/>
                    </View>
                </View>
            </Provider>

        )
    }
}


const ProductDetailStyles = StyleSheet.create({
    container: {
        flex: 1
    },
    topTabContainer: {
        ...Platform.select({
            //ios上该控件可以被子组件顶开高度 android上却不行 后面再想办法 先设定个固定高度
            ios: {},
            android: {
                flex: 1,
            }
        })
    }
});
